<template>
	<view class="page">
		<view class="topVue">
			<view class="safeVue" :style="{ height: statusBarHeight + 'rpx' }"></view>
			<view class="flex align-center padding-row30" :style="{ height: barHeight + 'rpx', top: statusBarHeight + 'rpx' }" @click="back()">
				<image src="../../static/back.png" style="width: 48rpx; height: 48rpx;"></image>
				<text style="line-height: 1; color: #454545; font-weight: 600; font-size: 32rpx; padding-left: 20rpx;">购物车</text>
			</view>
		</view>
		<view :style="{ height: statusBarHeight + barHeight + 'rpx' }"></view>
		
		<view class="box">
			<view class="item flex align-center" v-for="(item, index) in list" :key="index">
				<image :src="item.picture" style="width: 220rpx; height: 220rpx; border-radius: 10rpx;"></image>
				<view class="right flex-between flex-column">
					<view class="name">{{item.goodsName}}</view>
					<view class="name">库存：{{item.stocks}}</view>
					<view class="name">价格：{{item.price}}</view>
					<view class="name">抵扣金券：{{item.coupon}}</view>
					<view class="flex-end">
						<view class="btn" @click.stop="numChange(0, item)">-</view>
						<view class="num">{{ item.count }}</view>
						<view class="btn" @click.stop="numChange(1, item)">+</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="botVue flex-between align-center padding-row30">
			<view class="flex align-center">
				<text style="color: #d81e06; line-height: 1;" @click="deleteFun()">清空购物车</text>
			</view>
			<view class="flex align-center">
				<text style="color: #454545; line-height: 1; font-weight: 600;">总金额： {{ info.amount }}</text>
				<view class="pay" @click="toPay()">去支付</view>
			</view>
		</view>
		
		<u-popup v-model="show" mode="bottom" :closeable="ture">
			<view class="popupVue">
				<view class="item flex-between align-center padding-row30" @click="payWay=1">
					<view class="flex-column">
						<text>微信支付金额：￥{{ info.amount }}</text>
						<u-gap height="10"></u-gap>
						<text>金券抵扣：￥{{info.goodsCoupon }}</text>
						<u-gap height="10"></u-gap>
						<text>可用金券：￥{{info.userCoupon }}</text>
					</view>
					<image src="../../static/checked.png" style="width: 36rpx; height: 36rpx;" v-if="payWay===1"></image>
					<image src="../../static/check.png" style="width: 36rpx; height: 36rpx;" v-else></image>
				</view>
				<view class="item flex-between align-center padding-row30" @click="payWay=2" v-if="info.isCash==1 && info.redPacket * 1.08>= info.amount">
					<view class="flex-column">
						<text>红包兑换：￥{{info.redPacket}}</text>
						<u-gap height="10"></u-gap>
						<text>服务费：8%</text>
						<u-gap height="10"></u-gap>
						<text>兑换数量：￥{{ info.amount *1.08 }}</text>
					</view>
					<image src="../../static/checked.png" style="width: 36rpx; height: 36rpx;" v-if="payWay===2"></image>
					<image src="../../static/check.png" style="width: 36rpx; height: 36rpx;" v-else></image>
				</view>
				<view class="btn margin30" @click="toFun()">确认支付</view>
			</view>
		</u-popup>
		
				
		<u-popup v-model="show20" mode="bottom" :closeable="ture">
			<view class="popupVue">
				<view class="title text-center">红包兑换</view>
				
				<view class="cell">兑换数量：{{ info.amount *1.08 }}</view>
				<view class="cell">剩余红包数量：{{info.redPacket}}</view>
				<view class="cell">兑换红包数量： {{ info.amount *1.08 }}， 服务费： {{ info.amount *0.08 }}</view>
				<view class="cell">注：服务费8%</view>
				
				<view class="flex-center margin50" @click="show20 = false">
					<view class="text-center" style="width: 200rpx; height: 80rpx; background: #f5f5f5; border-radius: 15rpx; line-height: 80rpx;">
						取消
					</view>
					<view class="padding-row20"></view>
					<view 
					@click="payByRedPacket"
					class="text-center" 
					style="color: #fff; width: 200rpx; height: 80rpx; background: #D37430; border-radius: 15rpx; line-height: 80rpx;">
						确认兑换
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data(){
			return {
				statusBarHeight: 0,
				barHeight: 0,
				stopId: "",
				list: [],
				show: false,
				show20: false,
				payWay: 1,
				info: {
					amount: 0,
					goodsCoupon: 0,
					isCash: 0,
					redPacket: 0,
					shopId: "",
					userCoupon: 0,
				},
			}
		},
		async onLoad(option) {
			this.stopId = option.value
			let that = this;
			wx.getSystemInfo({
				success(res) {
					let deviceWidth = wx.getSystemInfoSync().windowWidth
					that.statusBarHeight = Number(res.statusBarHeight) * ( 750 / deviceWidth ) 
					let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
					let barHeight = menuButtonInfo.height + (menuButtonInfo.top - res.statusBarHeight) * 2
					that.barHeight = Number(barHeight) * ( 750 / deviceWidth )
				},
			});
		},
		
		computed: {
			...mapState({
				user: state=> state.user
			})
		},
		
		async onShow() {
			await this.getShopCarList()
			await this.getOrderInfo()
		},
		
		methods: {
			async toPay(){
				this.show = true
				await this.getOrderInfo()
			},
			
			back(){
				this.$tools.back()
			},
			
			toFun(){
				if(this.payWay===1) this.payByWeChat()
				if(this.payWay===2) {
					this.show = false
					this.show20 = true
				}
			},
			
			// 红包支付
			payByRedPacket(){
				this.$request(`/api/WeChat/addShopOrder?shopId=${this.stopId}&&type=${this.payWay}`, {
					shopId: Number(this.stopId),
					type: 2
				}, "POST").then(res=>{
					if(res.code===200) {
						this.show20 = false
						this.getOrderInfo()
						this.getShopCarList()
						this.$u.toast("支付成功")
						setTimeout(()=>{
							this.$tools.back(1)
						},1000)
					}else{
						this.$u.toast(res.msg)
					}
				})
			},
			
			// 微信支付
			payByWeChat(){
				this.$request(`/api/WeChat/addShopOrder?shopId=${this.stopId}&&type=${this.payWay}`, {
					// shopId: Number(this.stopId),
					// type: 2
				}, "POST").then(res=>{
					if(res.code===200) {
						this.show = false
						this.getOrderInfo()
						this.getShopCarList()
						this.$u.toast("下单成功")
						setTimeout(()=>{
							this.$tools.back(1)
						},1000)
					}else{
						this.$u.toast(res.msg)
					}
				})
				return
				let _that = this
				wx.login({
					success(loRres) {
						_that.$request(`/api/WeChat/getOpenId?code=${loRres.code}`, {}, "GET").then(result=>{
							let that = _that
							let openId = result.data
							console.log("获取openId", openId, that)
							that.$request(`/api/WeChat/addShopOrder?shopId=${that.stopId}&&type=1&&openId=${openId}`, {
								shopId: Number(that.stopId),
								type: 1,
								openId: openId
							}, "POST").then(res=>{
								if(res.code===200) {
									console.log("唤起微信支付信息", res)
									let payment = res.data
									uni.requestPayment({
										timeStamp: payment.timeStamp + "",
										nonceStr: payment.nonceStr,
										package: payment.package,
										signType: "SHA256withRSA",
										paySign: payment.paySign,
										success(payRes) {
											that.show = false
											that.$u.toast("支付成功");
										},
										fail(payErr) {
											console.log("支付失败", payErr);
										},
									});	
								}else{
									that.$u.toast(res.msg)
								}
							})
						})
					}
				})
			},
			
			async getOrderInfo(){
				const res = await this.$request(`/api/WeChat/settleShopCar`, {
					shopId: this.stopId
				}, 'GET')
				if(res.code===200) {
					this.info = res.data
					console.log(this.info)
				}
			},
			
			async getShopCarList(){
				const result = await this.$request("/api/WeChat/queryShopCar", {
					userId: this.user.id,
					shopId: this.stopId
				}, "GET")
				if(result.code===200) {
					console.log(result.data)
					this.list = result.data
				}
			},
			
			numChange(e, item){
				let count = e===0 ? item.count - 1 : item.count + 1
				console.log(count)
				this.$request("/api/WeChat/changeShopCar", {
					shopName: item.goodsName,
					goodsId: item.goodsId,
					count: count
				}, "GET").then(res=>{
					if(res.code===200) {
						this.getShopCarList()
					}else{
						this.$u.toast(res.msg)
					}
				})
			},
			
			// 清空购物车
			async deleteFun(){
				const result = await this.$request("/api/WeChat/clearShopCar", {
					userId: this.user.id,
					shopId: this.stopId
				},"GET")
				if(result.code===200) {
					this.$u.toast("清空成功")
					this.getShopCarList()
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.popupVue {
		width: 100%;
		padding: 30rpx 30rpx 60rpx;
		.item {
			width: 100%;
			height: 150rpx;
			border-bottom: 1rpx solid #f5f5f5;
			text {
				color: #333;
			}
		}
		.btn {
			width: 300rpx;
			height: 80rpx;
			background: #D37430;
			border-radius: 18rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
		}
		.title {
			font-weight: 600;
			font-size: 32rpx;
			color: #333;
		}
		.cell {
			color: #454545;
			line-height: 1;
			padding-top: 30rpx;
			font-size: 30rpx;
		}
	}
	.topVue {
		width: 100%;
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		.safeVue {
			width: 100%;
		}
	}
	
	.box {
		width: 100%;
		.item {
			width: 100%;
			padding: 15rpx 30rpx 15rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.right {
				flex: 1;
				height: 220rpx;
				padding-left: 20rpx;
				.name {
					color: #454545;
					line-height: 1;
				}
			}
		}
	}
	
	.botVue {
		width: 100%;
		height: 140rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
		.pay {
			width: 140rpx;
			height: 78rpx;
			background: #D37430;
			border-radius: 20rpx;
			color: #fff;
			line-height: 78rpx;
			text-align: center;
			margin-left: 30rpx;
		}
	}
	
	.btn {
		width: 60rpx;
		height: 60rpx;
		background: #f5f5f5;
		border-radius: 10rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 36rpx;
	}
	.num {
		width: 100rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #f5f5f5;
		border-radius: 10rpx;
		margin: 0 15rpx;
		text-align: center;
		font-size: 30rpx;
	}
</style>